<template>
	<view>
		<u-navbar title="优惠券" :title-size="35" :title-bold="true" :immersive="true" :background="background"
			:border-bottom="false"></u-navbar>
		<view class="" style="margin-top: 200rpx;">
			<!-- <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" inactive-color="#8D8D8D"
				active-color="#5FFF95" :active-item-style="activeItemStyle"></u-tabs> -->
			<view class="item" :style="{backgroundImage: 'url('+image+')',backgroundSize: '100% 100%'}"
				v-for="currenitem in CouponList">
				<view class="font">
					<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/font.png" style="width: 100%; height: 100%;">
					</image>
				</view>
				<view class="cen">
					<view class="item-center">
						<view class="price">
							<view class="price-p">{{Math.trunc(currenitem.f_free_money)}}</view>
							<view class="black">
								<view class="black-p">元</view>
							</view>
						</view>
						<view class="time">
							<view class="" style="display: flex;">
								<view class="title">
									台球优惠券
								</view>
								<view class="full"
									:style="{backgroundImage: 'url('+image1+')',backgroundSize: '100% 100%'}">
									<view class="full-p">
										满{{Math.trunc(currenitem.f_condition_money)}}可用
									</view>
								</view>
							</view>
							<view class="time-start">
								有效期始：{{currenitem.f_start_date}}
							</view>
							<view class="time-end">
								有效期至：{{currenitem.f_end_date}}
							</view>
						</view>
					</view>
					<view class="user" @click="shareCoupon(currenitem.id)">
						<view class="user-p" v-if="currenitem.linkStatus==1">
							已领取
						</view>
						<view class="user-p"  v-if="currenitem.linkStatus==0">
							立即领取
						</view>
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				image: 'https://gongxiangtaiqiu.axa2.com/taiqiu/coupons.png',
				image1: 'https://gongxiangtaiqiu.axa2.com/taiqiu/full.png',
				image2: 'https://gongxiangtaiqiu.axa2.com/taiqiu/full-gray.png',
				image3: 'https://gongxiangtaiqiu.axa2.com/taiqiu/coupons-gray.png',
				activeItemStyle: {
					color: '#000000'
				},
				list: [{
					name: '未使用'
				}, {
					name: '已使用'
				}, {
					name: '已过期',

				}],
				CouponList: [],
				current: 0,
				shopId: '',
				status:'',
			}
		},
		onLoad(options) {
			console.log(options.id)
			this.shopId = options.id
			this.Coupons()
		},
		methods: {
			shareCoupon(id) {
				this.$Api.shareCoupon({
					userId: uni.getStorageSync('userid'),
					couponId: id
				}).then(res => {
					
					console.log(res.data)
					if (res.data.code == 0) {
						uni.showToast({
							icon: 'success',
							title: '领取成功'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					} else if (res.data.code == 1) {
						console.log(res.data)
						uni.showToast({
							icon: 'none',
							title: res.data.data
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
					
				}).catch(res => {

				})
			},
			Coupons() {
				this.$Api.shopCoupons({
					shopId: this.shopId,
					userId: uni.getStorageSync('userid'),
				}).then(res => {
					this.status = res.data.data.linkStatus
					this.CouponList = res.data.data
					console.log(res.data.data.linkStatus, '我是优惠券列表')
					
				}).catch(res => {

				})
			},
			change(index) {
				this.current = index;
				this.Coupons()
				console.log(this.current)
			}
		}
	}
</script>


<style lang="scss">
	.item {
		width: 690rpx;
		height: 279rpx;
		// background-image: url('@/static/coupons.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin: auto;
		margin-top: 40rpx;
		padding-top: 20rpx;

		.font {
			width: 132rpx;
			height: 26rpx;
			margin-left: 40rpx;
		}

		.cen {
			width: 670rpx;
			height: 249rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item-center {
				width: 557rpx;
				height: 192rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				margin-left: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.time {
					height: 150rpx;
					margin-left: 20rpx;

					.time-start {
						// width: 239rpx;
						height: 23rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						margin-top: 20rpx;
					}

					.time-end {
						// width: 239rpx;
						height: 23rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						margin-top: 20rpx;
					}

					.title {
						width: 182rpx;
						height: 35rpx;
						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #222222;
					}

					.full {
						width: 144rpx;
						height: 32rpx;
						margin-top: 10rpx;

						.full-p {
							font-size: 22rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #222222;
							display: flex;
							justify-content: center;
							align-items: center;
						}
					}
				}

				.price {
					width: 180rpx;
					height: 150rpx;
					background: #8CFF80;
					border-radius: 8rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.black {
						width: 36rpx;
						height: 36rpx;
						background: #222222;
						border-radius: 50%;
						margin-top: 20px;
						display: flex;
						justify-content: center;
						align-items: center;

						.black-p {
							font-size: 22rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #FFFFFF;

						}
					}


					.price-p {
						width: 130rpx;
						font-size: 100rpx;
						font-family: PingFang SC;
						font-weight: 800;
						font-style: italic;
						color: #222222;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}

			.user {
				width: 72rpx;
				height: 192rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.user-p {
					width: 29rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #222222;
				}
			}
		}

	}
</style>
